{extend name="lib/main" /}
{block name="title"}{/block}
{block name="css"}
<style type="text/css">
    .list{ width:800px; border:1px solid #ccc; margin:10px; padding:10px;}
    .sec{ padding-left:20px; margin:10px;}
    .last{ padding-left:20px; margin:10px;}
    .submit{ text-align:center; margin:30px;}
    #three_level_menu{ margin-left: 36%}
</style>
{/block}
{block name="javascript"}
<script>
    $(document).ready(function () {
        $("#ok").bind("click", Save);
        $("#cancel").bind("click", function () {
            parent.layer.close(parent.layer_menu_index);
        });

        /**
         * 保存内容
         */
        function Save() {
            var load_index = layer.load(0, { shade: false });

            $.ajax({
                type: 'POST',
                url: "{:url('role_permission/menu_index')}",
                data: $("#fmNew").serialize(),
                dataType: 'json',
                success: function (data) {
                    if (data.code == 1) {
                        layer.close(load_index);
                        layer.alert(data.msg, function () {
                            //parent.refreshtb();
                            //window.close();
                            parent.layer.close(parent.layer_menu_index);
                        });
                    } else {
                        layer.alert(data.msg);
                    }
                }
            })
        }

    });


    /*	顶级top目录选择事件
        分析：
        达成目标：
            顶级目录取消选中时，子级目录同步取消选中；顶级目录选中时，子级目录无操作
        实现思路：
    1、保证sec和last目录表单的name值中的数值部分与top表单的name值数值保证一致，用以标记为同一组，可分别记做T1、S1、L1
    2、根据传入的id值，获取当前top目录的表单选中状态
    3、遍历所有元素，根据id值找到当前top下的所有sec和last目录表单并修改选择状态
    */
    function checkTop(id){

        //获取当前页面所有元素节点数
        //var len = document.main.elements.length;
        var len = $('#three_level_menu input').length;

        //var len = $('#la_la').children().length;

        //根据当前id值，获取当前top目录选择框的选中状态
        var topchecked = document.all("T"+id).checked;
        console.log(topchecked);
        //alert(topchecked);
        //遍历所有元素，根据id找出所有当前top目录下的sec和last目录
        for( var i=0;i<len;i++){
            //if(document.main.elements[i].name == 'S'+id+'[]' || document.main.elements[i].name == 'L'+id+'[]'){
            if($('#three_level_menu input')[i].name == 'S'+id+'[]' || $('#three_level_menu input')[i].name == 'L'+id+'[]'){
                if(topchecked == false){
                    $('#three_level_menu input')[i].checked = topchecked;
                }
            }
        }
    }

    /*	次级sec目录选择事件
    分析：
    达成目标：
    次级目录有一个选中时，顶级目录同步选中，底级目录无操作；
    当所有次级目录取消选中时，顶级目录同步取消选中，同时底级目录也取消选中
    实现思路：
    1、对顶级目录操作。遍历所有元素，如果有1个次级目录是选择状态，则顶级目录也为选中状态，如果所有次级目录都未选中，则顶级目录也为未选中状态
    2、对底级目录操作。当前次级目录如果未选中，则设置其底级目录也为未选中；如当前次级目录为选择状态，其底级目录无操作
    */
    function checkSec(id,sid){

        /**********  对底级目录的操作  **********/
            //获取当前节点
        var curNode = document.getElementById(sid);

        //通过sid获取当前节点的下一个兄弟节点
        var nextNode = curNode.nextElementSibling;
        console.log(nextNode);
        //获取该兄弟节点的所有子节点
        if (nextNode) {
            var subNode = nextNode.childNodes;

            //遍历所有子节点
            for(var i=0;i<subNode.length;i++){
                //筛选出input节点，并且上级节点状态为未选中时，设置所有子节点状态为未选中
                if(subNode[i].name && curNode.checked==false){
                    subNode[i].checked = false;
                }
            }
        }


        /***********  对顶级目录的操作  **********/
            //获取当前节点
        //var len = document.getElementById('la_la').elements.length;
        var len = $('#three_level_menu input').length;

        //alert(len);
        for(var i=0;i<len;i++){
            //遍历元素，找出当前目录的次级目录，并进行下一步操作
            if($('#three_level_menu input')[i].name == 'S'+id+'[]'){
                //如果有1个次级目录是选择状态，则顶级目录也为选中状态
                if($('#three_level_menu input')[i].checked){
                    //设置顶级目录为选中状态
                    document.all("T"+id).checked = true;
                    return;
                }
            }
        }
        //如果所有次级目录都未选中，则顶级目录也设置未选中
        document.all("T"+id).checked = false;
    }


    /*	底级last目录选择事件
    */
    function checkLast(id,sid){

        /**  对次级目录的处理  **/
            //获取当前节点
        var curNode = document.getElementById(sid);

        //通过当前节点找出上级节点的上一个兄弟节点
        var brotherNode = curNode.parentNode.previousElementSibling;
        //console.log(curNode.checked);

        //如果当前底级目录选择状态为已选中，则设置其上级即次级目录也为选中状态
        if(curNode.checked){
            brotherNode.checked = true;
        }


        /**  对顶级目录的处理  **/
            //获取当前页面所有元素节点数
        //var len = document.getElementById('la_la').elements.length;
        var len = $('#three_level_menu input').length;

        for(var i=0;i<len;i++){
            //遍历元素，找出当前底级目录
            if($('#three_level_menu input')[i].name == 'L'+id+'[]'){
                //如果有1个底级目录是选择状态，则顶级目录也为选中状态
                if($('#three_level_menu input')[i].checked){
                    //设置顶级目录为选中状态
                    document.all("T"+id).checked = true;
                    return;
                }
            }
        }
    }
</script>

{/block}
{block name="content"}
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-content">
                    <h1 style="margin-left: 35%;margin-bottom: 20px;margin-top: 20px;"> {$role_name}</h1>
                    <form method="post" id="fmNew" class="form-horizontal" enctype="multipart/form-data">
                        <div id="three_level_menu">
                            <div class="list">
                                <div class="title"> 菜单权限分配</div>
                                <br>
                                {php}
                                    $js = 1;
                                    if (!empty($menu_list)) {
                                        foreach ($menu_list as $key => $val) {
                                            $key = $key+1;
                                            echo "<div class ='top'>";
                                            if ($val['had']) {
                                                echo "<input type='checkbox' checked='checked' name = T$key  value=" . $val['id'] . " onclick='checkTop(" . $key .")'>";
                                            } else {
                                                echo "<input type='checkbox' name = T$key  value=" . $val['id'] . " onclick='checkTop(" . $key .")'>";
                                            }
                                            echo "&nbsp;<b>" . $val['title']  . "</b>";

                                            if (isset($val['child']) && !empty($val['child'])) {

                                                foreach ($val['child'] as $i => $item) {
                                                    echo "<div class='sec'>";
                                                    $sName = "S" . $key . '[]';
                                                    if ($item['had']) {
                                                        echo "<input type='checkbox' checked='checked' id=p$js name=$sName value=" . $item['id'] .  " onclick='checkSec(" . $key . ",this.id)'>";
                                                    }else {
                                                        echo "<input type='checkbox' id=p$js name=$sName value=" . $item['id'] .  " onclick='checkSec(" . $key . ",this.id)'>";
                                                    }
                                                    echo "&nbsp;" . $item['title'];

                                                    $js++;

                                                    if (isset($item['child']) && !empty($item['child'])) {
                                                        echo "<div class='last'>";
                                                        foreach ($item['child'] as $k => $v) {
                                                            $lName = "L" . $key . '[]';
                                                            if ($v['had']) {
                                                                echo "<input type='checkbox' checked='checked' id=p$js name=$lName value=" . $v['id'] . " onclick='checkLast(" . $key . ",this.id)'>&nbsp;";
                                                            } else {
                                                                echo "<input type='checkbox' id=p$js name=$lName value=" . $v['id'] . " onclick='checkLast(" . $key . ",this.id)'>&nbsp;";
                                                            }
                                                            echo $v['title'] . "&nbsp;&nbsp;" ;
                                                            $js++;
                                                        }
                                                        echo "</div>";
                                                    }

                                                    echo "</div>";
                                                }
                                            }

                                            echo "</div>";
                                        }
                                    }
                                {/php}
                            </div>
                        </div>

                        <div id = 'hidden_input'>
                        <input type="hidden" name="role_id" value="{$role_id}" />
                        </div>

                        <div class="form-group">
                            <div class="col-sm-12 col-sm-offset-5">
                                <button class="btn btn-primary" id="ok" type="button">提交</button>
                                <button class="btn btn-white" id="cancel" type="button">取消</button>
                            </div>
                        </div>

                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{/block}


<!--<div class ='top'>
        <input type='checkbox' name = T1  value=1 onclick='checkTop(1)'>
        <b>a</b>
        <div class='sec'>
            <input type='checkbox' id=p1 name=S1[] value=2 onclick='checkSec(1,this.id)'>b
            <div class='last'>
                <input type='checkbox' id=p2 name=L1[] value=3 onclick='checkLast(1,this.id)'>c
            </div>
            <div class='last'>
                <input type='checkbox' id=p3 name=L1[] value=6 onclick='checkLast(1,this.id)'>g
            </div>
        </div>
    </div>
    <div class="top">
        <input type="checkbox" name="T1" value="1" onClick="checkTop('1')" >
        <b>系统使用</b>
        <div class="sec">
            <input type="checkbox" id="p1" name="S1[]" value="3" onClick="checkSec('1',this.id)" >
            系统使用规范
            <div class="last">
                <input type="checkbox" id="p2" name="L1[]" value="4" onClick="checkLast('1',this.id)" >
                添加
                <input type="checkbox" id="p3" name="L1[]" value="5" onClick="checkLast('1',this.id)" >
                删除
                <input type="checkbox" id="p4" name="L1[]" value="6" onClick="checkLast('1',this.id)" >
                编辑 </div>
        </div>
        <div class="sec">
            <input type="checkbox" id="p5" name="S1[]" value="7" onClick="checkSec('1',this.id)" >
            系统使用详情
            <div class="last">
                <input type="checkbox" id="p6" name="L1[]" value="8" onClick="checkLast('1',this.id)" >
                添加
                <input type="checkbox" id="p7" name="L1[]" value="9" onClick="checkLast('1',this.id)" >
                删除
                <input type="checkbox" id="p8" name="L1[]" value="10" onClick="checkLast('1',this.id)" >
                编辑 </div>
        </div>
    </div>
    <div class="top">
        <input type="checkbox" name="T2" value="2" onClick="checkTop('2')" >
        <b>会议资料</b>
        <div class="sec">
            <input type="checkbox" id="p9" name="S2[]" value="11" onClick="checkSec('2',this.id)" >
            会议报告
            <div class="last">
                <input type="checkbox" id="p10" name="L2[]" value="12" onClick="checkLast('2',this.id)" >
                添加
                <input type="checkbox" id="p11" name="L2[]" value="13" onClick="checkLast('2',this.id)" >
                删除
                <input type="checkbox" id="p12" name="L2[]" value="14" onClick="checkLast('2',this.id)" >
                编辑 </div>
        </div>
    </div>
</div>
</div>-->